<template>
  <div>
    <!-- 押金明细 -->
    <el-dialog
      v-el-drag-dialog
      title="押金明细"
      :visible.sync="visible"
      width="1024px"
      @close="reset"
    >
      <el-form ref="dataForm" class="form" label-width="100px" label-position="right">
        <el-form-item label="押金单号">
          <el-input v-model="temp.depositCode" disabled />
        </el-form-item>
        <el-form-item label="客户姓名">
          <el-input v-model="temp.csmName" disabled />
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="temp.csmCardNo" disabled />
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="temp.csmPhone" disabled />
        </el-form-item>
        <el-form-item label="详细地址" style="width: 64.5%;">
          <el-input v-model="temp.csmAddress" disabled />
        </el-form-item>
        <el-form-item label-width="0" style="width: 100%;">
          <lb-table
            ref="lbTable"
            border
            highlight-current-row
            element-loading-text="加载中"
            :column="tableData.column"
            :data="tableData.data.rows"
            :pagination="false"
            show-summary
            align="center"
          />
        </el-form-item>
        <el-form-item label-width="100px" label="备注" style="width: 100%;">
          <el-input v-model="temp.remark" disabled />
        </el-form-item>
        <el-form-item label="收据单号">
          <el-input v-model="temp.billCode" disabled />
        </el-form-item>
        <el-form-item label="开始时间">
          <el-input v-model="beginDt" disabled />
        </el-form-item>
        <el-form-item label="手续费">
          <el-input v-model="temp.fee1" disabled />
        </el-form-item>
        <el-form-item label="收款人">
          <el-input v-model="temp.depReceiver" disabled />
        </el-form-item>
        <el-form-item label="收款方式">
          <el-input v-model="calcType" disabled />
        </el-form-item>
        <el-form-item label="支付方式">
          <el-input v-model="paymentMethod" disabled />
        </el-form-item>
        <el-form-item label="支付状态">
          <el-input v-model="payStatus" disabled />
        </el-form-item>
        <el-form-item label="经办时间">
          <el-input v-model="transactDt" disabled />
        </el-form-item>
        <el-form-item label="经办人">
          <el-input v-model="temp.transactor" disabled />
        </el-form-item>
        <el-form-item label="押瓶机构">
          <el-input v-model="temp.ckOrgName" disabled />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reset">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { queryCashPledgeDetail, queryMap } from '@/api'
  import { formatColumnMap, parseTime } from '@/utils'

  export default {
    name: 'popups',
    data() {
      return {
        visible: false,
        calcTypeList: [],
        paymentMethodList: [],
        payStatusList: [],
        temp: {},
        tableData: {
          column: [
            // {
            //   prop: 'goodsCount',
            //   label: '序号',
            //   width: 60
            // },
            {
              prop: 'goodsName',
              label: '规格型号'
            },
            {
              prop: 'rental',
              label: '单个租金（元）',
              width: 130
            },
            {
              prop: 'deposit',
              label: '单个押金(元)'
            },
            {
              prop: 'goodsCount',
              label: '数量'
            },
            {
              prop: 'totalDeposit',
              label: '总押金(元)'
            },
            {
              prop: 'btNoIDS',
              label: '钢瓶号'
            }
          ],
          data: {
            rows: []
          }
        }
      }
    },
    computed: {
      // 开始时间
      beginDt: function() {
        return parseTime(this.temp.beginDt, '{y}-{m}-{d} {h}:{i}:{s}')
      },
      // 收款方式
      calcType: function() {
        return formatColumnMap(this.calcTypeList, 'value', this.temp.calcType, 'desc')
      },
      // 支付方式
      paymentMethod: function() {
        return formatColumnMap(this.paymentMethodList, 'value', this.temp.paymentMethod, 'desc')
      },
      // 支付状态
      payStatus: function() {
        return formatColumnMap(this.payStatusList, 'value', this.temp.payStatus, 'desc')
      },
      // 经办时间
      transactDt: function() {
        return parseTime(this.temp.transactDt, '{y}-{m}-{d} {h}:{i}:{s}')
      }
    },
    async created() {
      await this.queryOptionsMap()
      await this.queryPayMap()
      await this.queryPayStatusMap()
    },
    methods: {
      async open(temp) {
        // 请求接口
        const res = await queryCashPledgeDetail({
          depCode: temp.depositCode,
          depositId: temp.depositId,
          depStatus: temp.depStatus
        })
        this.temp = res.data
        this.tableData.data.rows = res.data.depositDetails
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
        })
      },
      // 收款方式
      async queryOptionsMap() {
        const { data } = await queryMap({ enumName: 'CalcType' })
        this.calcTypeList = data
      },
      // 支付方式
      async queryPayMap() {
        const { data } = await queryMap({ enumName: 'PaymentMethod' })
        this.paymentMethodList = data
      },
      // 支付状态
      async queryPayStatusMap() {
        const { data } = await queryMap({ enumName: 'PayStatus' })
        this.payStatusList = data
      },
      // 关闭
      reset() {
        this.visible = false
      }
    }
  }
</script>

<style lang="scss" scoped>
.form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
</style>
